@reblu/site-blocks 0.18.0 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @reblu/site-blocks
 
+## 0.19.0
+
+### Minor Changes
+
+- 38d27c5: Add `ProfessionalFields`, a drop-in for the tenant-defined professional fields on a team profile (`professional.fields`, e.g. a registration number). `ProfileCard` gains an optional `fields` prop that shows the card fields. Additive: existing usage renders as before.
+- 5ef5630: Add `ProductCarousel` on `@reblu/site-blocks/client`, a drop-in product strip for «Productos relacionados». It scrolls natively with scroll-snap, so touch users swipe it, and has previous/next arrows from `sm` up. The arrows are hidden when everything fits and disabled at the end you have reached. The track is a focusable, labelled region and arrow scrolling respects reduced motion. It renders `ProductCard` by default, or your own card through `renderProduct`, and needs no carousel dependency. Additive: no existing export changes.
+
+### Patch Changes
+
+- 5ef5630: Every button the organisms render shows the pointer cursor on hover under Tailwind v4: `AddToCartButton`, the `CartLineList` quantity stepper and remove button, `CheckoutForm`, `CheckoutLoginPrompt`, `Collection` pagination and facet chips, `DataRequestForm`, `OrderConfirmation` and the `ShareButtons` copy button. Disabled buttons show `cursor-not-allowed`. A source guard (`test/button-cursor.test.ts`) fails on any new `<button>` without the pointer cursor.
+- 49384d1: README: document the `MarkdownRenderer` `images` option (URL-prefix allowlist, custom `render`, `<figure>` captions) with a `next/image` example. No code change.
+- Updated dependencies [95f5b5f]
+- Updated dependencies [5ef5630]
+- Updated dependencies [e27e1b0]
+  - @reblu/site-contracts@1.19.0
+  - @reblu/site-ui@0.7.2
+
 ## 0.18.0
 
 ### Minor Changes

package/README.md

@@ -26,6 +26,7 @@ colour on the red background. See `docs/theming/theming.md`.
 | `MarkdownRenderer`                                                                                            | `.`        | Canonical Blog renderer: `marked` → **hast-util-sanitize** (XSS) → component map, with a YouTube-domain allowlist. RSC-safe. |
 | `CourseDescription`                                                                                           | `.`        | Drop-in for the rich-text course `description` (`client.academy.bySlug()`). Server Component. See "Rich-text descriptions".  |
 | `Treatment`, `ParentPage`, `ProfileCard`, `ProductCard`                                                       | `.`        | Presentational organisms over the SITE API contracts. RSC-safe. `Specialty`: deprecated alias, see below.                    |
+| `ProfessionalFields`                                                                                          | `.`        | The tenant's own professional fields (`professional.fields`) on a team card or profile. RSC-safe. See below.                 |
 | `ShopFilters`                                                                                                 | `.`        | Plug-and-play shop filter chrome over `GET /api/site/shop/facets`. RSC-safe. See "Shop filters" below.                       |
 | `CartLineList`, `CartSummary`, `CartAdjustmentsNotice`, `AddedToCartToast`, `CheckoutLoginPrompt`, `CheckoutForm`, `OrderConfirmation` | `.`        | Cart & checkout organisms. RSC-safe by construction. See "Cart & checkout" below.                                            |
 | `PageBlocks`, `FaqAccordion`                                                                                  | `.`        | Registry-block renderer (`PageDetail.blocks`) and native `<details>` FAQ. Server Components. See "Page blocks" below.        |
@@ -37,6 +38,7 @@ colour on the red background. See `docs/theming/theming.md`.
 | `ShareButtons`                                                                                                | `./client` | Social share (X / LinkedIn / WhatsApp / copy).                                                                               |
 | `AddToCartButton`, `CartIcon`                                                                                 | `./client` | Add-to-cart feedback (REB-837) — **moved here from `.`**, see below.                                                         |
 | `DataRequestForm`                                                                                             | `./client` | Drop-in public GDPR rights form over `POST /api/site/data-requests` (REB-980). See "GDPR rights form" below.                |
+| `ProductCarousel`                                                                                             | `./client` | Scroll-snap product strip with prev/next arrows («Productos relacionados»). See "Product carousel" below.                     |
 
 ## Boundary
 
@@ -171,6 +173,39 @@ Internal links (`/privacidad`, `#clause-4`) and `mailto:` links open in the same
 tab. External links (`https://…`, `//…`) open in a new tab and always carry
 `rel="noopener noreferrer"`.
 
+### Images: the `images` option
+
+Without `images`, every image the sanitiser keeps renders as a lazy `<img>`
+inside its paragraph. Pass `images` to restrict where they may load from and,
+optionally, how they render:
+
+```tsx
+import Image from 'next/image'
+
+const MEDIA = 'https://<ref>.supabase.co/storage/v1/object/public/blog-media/'
+
+<MarkdownRenderer
+  content={post.content}
+  headingOffset={1}
+  normalizeHeadings
+  images={{
+    // Absolute URL prefixes (ending in `/`); any other image is dropped.
+    allowedUrlPrefixes: [MEDIA],
+    // Optional: render an allowed image yourself. Default: a lazy <img>.
+    render: ({ src, alt }) => <Image src={src} alt={alt} width={1600} height={900} />,
+  }}
+/>
+```
+
+- The prefix is compared on the parsed, normalised URL (`..` resolved, scheme
+  included), so `http://…` never matches an `https://…` prefix.
+- A paragraph holding only an allowed image becomes a `<figure>`; the image
+  title (`![alt](url "caption")`) is its `<figcaption>`.
+- `render` receives `{ src, alt }` only: give `next/image` a size you know
+  (e.g. encoded in the object name) or use `fill` inside a sized box, and allow
+  the host in `images.remotePatterns`.
+- `SafeHtml` has no `images` option: its images keep the default rendering.
+
 ### Which authored attributes survive
 
 The renderer rebuilds each element to apply the tenant's design tokens and to
@@ -764,6 +799,94 @@ export async function ServicesTeaser() {
 }
 ```
 
+## Professional fields — `ProfessionalFields` (REB-1099)
+
+Each tenant defines its own fields for team profiles in nexus › Equipo ›
+«Campos profesionales» — for example a registration number, a licence or a
+membership id — and marks which are public and which also go on the card. The
+SITE API serves the public ones as `professional.fields`
+(`{ label, value, showOnCard }[]`): the list (`client.pages.list`) carries only
+the card fields, the profile (`client.pages.bySlug`) every public one. The
+labels are the tenant's; this package names no field.
+
+On the team card, `ProfileCard` takes them directly:
+
+```tsx
+import { ProfileCard } from '@reblu/site-blocks'
+
+const { data: team } = await client.pages.list({ type: ['team'] })
+
+{team.map((p) => (
+  <ProfileCard
+    key={p.slug}
+    name={p.title}
+    role={p.professional?.role ?? undefined}
+    imageUrl={p.coverImageUrl ?? undefined}
+    fields={p.professional?.fields}
+    href={`/equipo/${p.slug}`}
+  />
+))}
+```
+
+On the profile page, drop in `ProfessionalFields` (a `<dl>`):
+
+```tsx
+import { ProfessionalFields } from '@reblu/site-blocks'
+
+const page = await client.pages.bySlug(slug)
+
+<ProfessionalFields fields={page.professional?.fields} />
+```
+
+`variant='card'` keeps only `showOnCard` fields. It renders nothing when there
+is nothing to show, so it is safe to place unconditionally. Style it with
+`className` or `[data-slot="professional-fields"]`.
+
+## Product carousel — `ProductCarousel` (REB-1120)
+
+A horizontal product strip for «Productos relacionados» or «También te puede
+interesar», with no carousel dependency. The track is a native scroll container
+with CSS scroll-snap, so touch users swipe it. From `sm` up, previous/next
+arrows scroll one visible page. The arrows are not rendered when every product
+fits, and the arrow at the end you have reached is disabled.
+
+```tsx
+'use client'
+import { ProductCarousel } from '@reblu/site-blocks/client'
+
+// `related` is a `ShopProductListItem[]`, e.g. from `client.shop.products({ category })`
+<ProductCarousel
+  products={related}
+  heading='También te puede interesar'
+  productHref={(p) => `/shop/${p.slug}`}
+/>
+```
+
+It renders the package's `ProductCard` by default. To use your own card, pass
+`renderProduct`. Any item with an `id` works:
+
+```tsx
+<ProductCarousel
+  products={related}
+  heading='También te puede interesar'
+  renderProduct={(p) => <MyProductCard product={p} />}
+/>
+```
+
+- **Accessibility.** The track is a focusable `region` with
+  `aria-roledescription="carrusel"`. It is named by `heading` when you pass one,
+  otherwise by `labels.region`. Once the track has focus, the keyboard arrow
+  keys scroll it. The arrows are `<button>`s with `aria-label`s and
+  `aria-controls` pointing at the track. Under `prefers-reduced-motion: reduce`
+  they jump instead of animating.
+- **Copy.** The defaults are Spanish (`DEFAULT_PRODUCT_CAROUSEL_LABELS`).
+  Override them with `labels={{ region, roleDescription, previous, next }}`.
+- **Layout.** About 1.5 cards are visible on mobile, so the next one peeks in,
+  then 3 from `sm` and 4 from `lg`. Change the width with `itemClassName`
+  (e.g. `basis-64`). Style it with `className` or `[data-slot="product-carousel"]`.
+  `headingClassName` replaces the heading's typography (see the className rule
+  above). It renders nothing for an empty list.
+
 ## Page blocks
 
 `PageBlocks` renders a page's registry blocks (`PageDetail.blocks` from

package/dist/_heading-BsNbc1wc.d.cts

@@ -0,0 +1,4 @@
+/** A heading level a caller can configure — `h1`…`h6`. */
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+export type { HeadingLevel as H };

package/dist/_heading-BsNbc1wc.d.ts

@@ -0,0 +1,4 @@
+/** A heading level a caller can configure — `h1`…`h6`. */
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+export type { HeadingLevel as H };

package/dist/client.cjs

@@ -37,7 +37,9 @@ __export(client_exports, {
   DATA_REQUEST_FIELD_LIMITS: () => DATA_REQUEST_FIELD_LIMITS,
   DATA_REQUEST_TYPES: () => import_site_contracts.DATA_REQUEST_TYPES,
   DEFAULT_DATA_REQUEST_FORM_LABELS: () => DEFAULT_DATA_REQUEST_FORM_LABELS,
+  DEFAULT_PRODUCT_CAROUSEL_LABELS: () => DEFAULT_PRODUCT_CAROUSEL_LABELS,
   DataRequestForm: () => DataRequestForm,
+  ProductCarousel: () => ProductCarousel,
   ShareButtons: () => ShareButtons,
   useCollection: () => useCollection
 });
@@ -226,7 +228,7 @@ function Collection({
     ] })
   ] });
 }
-var PAGE_BTN_CLASS = "inline-flex h-9 items-center rounded-md border border-border px-4 text-sm font-medium transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+var PAGE_BTN_CLASS = "inline-flex h-9 cursor-pointer items-center rounded-md border border-border px-4 text-sm font-medium transition-colors hover:bg-muted disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
 function FacetChip({ label, pressed, color, onClick }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
@@ -236,7 +238,7 @@ function FacetChip({ label, pressed, color, onClick }) {
       onClick,
       style: color ? { "--facet-color": color } : void 0,
       className: (0, import_utils.cn)(
-        "inline-flex items-center rounded-full border px-3 py-1 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "inline-flex cursor-pointer items-center rounded-full border px-3 py-1 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         pressed ? color ? "border-transparent bg-[var(--facet-color)] text-white" : "border-transparent bg-primary text-primary-foreground" : "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
       ),
       children: label
@@ -321,7 +323,7 @@ function ShareButtons({ url, title, className, labels }) {
       {
         type: "button",
         onClick: handleCopy,
-        className: (0, import_utils2.cn)(LINK_CLASS, "w-auto gap-2 px-3", copied && "border-primary text-primary"),
+        className: (0, import_utils2.cn)(LINK_CLASS, "w-auto cursor-pointer gap-2 px-3", copied && "border-primary text-primary"),
         "aria-label": t.copy,
         children: [
           copied ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CopyIcon, {}),
@@ -442,7 +444,7 @@ function AddToCartButton({
       "data-slot": "add-to-cart-button",
       "data-status": status,
       className: (0, import_utils3.cn)(
-        "inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         isDisabled ? "cursor-not-allowed bg-muted text-muted-foreground" : "bg-primary text-primary-foreground hover:bg-primary/90",
         status === "error" && "bg-destructive text-destructive-foreground",
         className
@@ -527,11 +529,214 @@ function CartIcon({ itemCount, href, hydrated, bumpOnAdd, labels, className }) {
   );
 }
 
-// src/components/data-request-form.tsx
+// src/components/product-carousel.tsx
 var import_react4 = require("react");
+var import_button_variants = require("@reblu/site-ui/button-variants");
+var import_utils6 = require("@reblu/site-ui/utils");
+
+// src/components/_heading.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Heading({
+  level,
+  className,
+  children
+}) {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Tag, { className, children });
+}
+
+// src/components/product-card.tsx
 var import_utils5 = require("@reblu/site-ui/utils");
+
+// src/lib/format-price.ts
+function formatPrice(cents, currency = "EUR", locale = "es-ES") {
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency
+  }).format(cents / 100);
+}
+
+// src/components/product-card.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function ProductCard({ product, href, currencyCode = "EUR", locale, className }) {
+  const image = product.images.find((i) => i.isPrimary) ?? product.images[0];
+  const hasDiscount = product.comparePrice != null && product.comparePrice > product.price;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "article",
+    {
+      className: (0, import_utils5.cn)(
+        "group flex flex-col overflow-hidden rounded-lg border bg-card transition-shadow hover:shadow-lg",
+        className
+      ),
+      "data-slot": "product-card",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "relative aspect-square overflow-hidden bg-muted", children: image ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "img",
+          {
+            src: image.url,
+            alt: image.alt ?? product.name,
+            loading: "lazy",
+            className: "h-full w-full object-cover transition-transform group-hover:scale-105"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex h-full items-center justify-center text-4xl text-muted-foreground/30", "aria-hidden": "true", children: "\u{1F6CD}\uFE0F" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-1 flex-col gap-2 p-4", children: [
+          product.category && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "inline-flex w-fit items-center rounded-full bg-secondary px-2.5 py-0.5 text-xs font-medium text-secondary-foreground", children: product.category.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "text-base font-semibold leading-tight", children: href ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { href, className: "transition-colors hover:text-primary", children: product.name }) : product.name }),
+          product.shortDescription && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "line-clamp-2 text-sm text-muted-foreground", children: product.shortDescription }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-auto flex items-baseline gap-2 pt-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-lg font-bold text-foreground", children: formatPrice(product.price, currencyCode, locale) }),
+            hasDiscount && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-sm text-muted-foreground line-through", children: formatPrice(product.comparePrice, currencyCode, locale) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/product-carousel.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var DEFAULT_PRODUCT_CAROUSEL_LABELS = {
+  region: "Productos relacionados",
+  roleDescription: "carrusel",
+  previous: "Anterior",
+  next: "Siguiente"
+};
+var EDGE_EPSILON = 1;
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false;
+}
+function ChevronIcon({ direction }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "rtl:-scale-x-100",
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: direction === "left" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" })
+    }
+  );
+}
+function ProductCarousel(props) {
+  const { products, heading, headingLevel = 2, headingClassName, labels, className, itemClassName } = props;
+  const t = { ...DEFAULT_PRODUCT_CAROUSEL_LABELS, ...labels };
+  const trackId = (0, import_react4.useId)();
+  const headingId = (0, import_react4.useId)();
+  const trackRef = (0, import_react4.useRef)(null);
+  const [canPrev, setCanPrev] = (0, import_react4.useState)(false);
+  const [canNext, setCanNext] = (0, import_react4.useState)(false);
+  const update = (0, import_react4.useCallback)(() => {
+    const el = trackRef.current;
+    if (!el) return;
+    const max = el.scrollWidth - el.clientWidth;
+    const pos = Math.abs(el.scrollLeft);
+    setCanPrev(pos > EDGE_EPSILON);
+    setCanNext(pos < max - EDGE_EPSILON);
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    const el = trackRef.current;
+    if (!el) return;
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    let observer;
+    if (typeof ResizeObserver !== "undefined") {
+      observer = new ResizeObserver(update);
+      observer.observe(el);
+    } else {
+      window.addEventListener("resize", update);
+    }
+    return () => {
+      el.removeEventListener("scroll", update);
+      if (observer) observer.disconnect();
+      else window.removeEventListener("resize", update);
+    };
+  }, [update, products.length]);
+  const scrollByPage = (direction) => {
+    const el = trackRef.current;
+    if (!el) return;
+    const rtl = typeof getComputedStyle === "function" && getComputedStyle(el).direction === "rtl";
+    el.scrollBy({
+      left: direction * el.clientWidth * (rtl ? -1 : 1),
+      behavior: prefersReducedMotion() ? "auto" : "smooth"
+    });
+  };
+  if (products.length === 0) return null;
+  const scrollable = canPrev || canNext;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { "data-slot": "product-carousel", className: (0, import_utils6.cn)("flex flex-col gap-4", className), children: [
+    (heading || scrollable) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+      heading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: headingId, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Heading, { level: headingLevel, className: headingClassName ?? "text-xl font-semibold", children: heading }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", {}),
+      scrollable && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hidden gap-2 sm:flex", "data-slot": "product-carousel-controls", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "button",
+            className: (0, import_utils6.cn)((0, import_button_variants.buttonVariants)({ variant: "outline", size: "icon" }), "rounded-full"),
+            "aria-label": t.previous,
+            "aria-controls": trackId,
+            disabled: !canPrev,
+            onClick: () => scrollByPage(-1),
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronIcon, { direction: "left" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "button",
+            className: (0, import_utils6.cn)((0, import_button_variants.buttonVariants)({ variant: "outline", size: "icon" }), "rounded-full"),
+            "aria-label": t.next,
+            "aria-controls": trackId,
+            disabled: !canNext,
+            onClick: () => scrollByPage(1),
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronIcon, { direction: "right" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        ref: trackRef,
+        id: trackId,
+        role: "region",
+        "aria-roledescription": t.roleDescription,
+        ...heading ? { "aria-labelledby": headingId } : { "aria-label": t.region },
+        tabIndex: 0,
+        "data-slot": "product-carousel-track",
+        className: "snap-x snap-mandatory overflow-x-auto overscroll-x-contain scroll-smooth rounded-lg pb-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:scroll-auto",
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { role: "list", className: "m-0 flex list-none gap-4 p-0", children: products.map((product, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "li",
+          {
+            className: (0, import_utils6.cn)(
+              "shrink-0 snap-start basis-[calc((100%-1rem)/1.5)] sm:basis-[calc((100%-2rem)/3)] lg:basis-[calc((100%-3rem)/4)]",
+              itemClassName
+            ),
+            children: props.renderProduct ? props.renderProduct(product, index) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              ProductCard,
+              {
+                product,
+                href: props.productHref?.(product),
+                currencyCode: props.currencyCode,
+                locale: props.locale,
+                className: "h-full"
+              }
+            )
+          },
+          product.id
+        )) })
+      }
+    )
+  ] });
+}
+
+// src/components/data-request-form.tsx
+var import_react5 = require("react");
+var import_utils7 = require("@reblu/site-ui/utils");
 var import_site_contracts = require("@reblu/site-contracts");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var DATA_REQUEST_FIELD_LIMITS = Object.freeze({ name: 200, email: 320, details: 5e3 });
 var DEFAULT_DATA_REQUEST_FORM_LABELS = {
   requestTypeLabel: "Derecho que quieres ejercer",
@@ -557,7 +762,7 @@ var DEFAULT_DATA_REQUEST_FORM_LABELS = {
   nameRequired: "Indica tu nombre.",
   emailInvalid: "Introduce un email v\xE1lido.",
   consentRequired: "Debes aceptar el tratamiento de tus datos para gestionar la solicitud.",
-  success: (deadline) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+  success: (deadline) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
     "Hemos recibido tu solicitud. Te responderemos como m\xE1ximo el ",
     deadline,
     "."
@@ -606,18 +811,18 @@ function DataRequestForm({
     ...labels,
     requestTypes: { ...DEFAULT_DATA_REQUEST_FORM_LABELS.requestTypes, ...labels?.requestTypes }
   };
-  const id = (0, import_react4.useId)();
-  const [requestType, setRequestType] = (0, import_react4.useState)("");
-  const [name, setName] = (0, import_react4.useState)("");
-  const [email, setEmail] = (0, import_react4.useState)("");
-  const [details, setDetails] = (0, import_react4.useState)("");
-  const [consent, setConsent] = (0, import_react4.useState)(false);
-  const [errors, setErrors] = (0, import_react4.useState)({});
-  const [formError, setFormError] = (0, import_react4.useState)(null);
-  const [submitting, setSubmitting] = (0, import_react4.useState)(false);
-  const [ack, setAck] = (0, import_react4.useState)(null);
-  const statusRef = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const id = (0, import_react5.useId)();
+  const [requestType, setRequestType] = (0, import_react5.useState)("");
+  const [name, setName] = (0, import_react5.useState)("");
+  const [email, setEmail] = (0, import_react5.useState)("");
+  const [details, setDetails] = (0, import_react5.useState)("");
+  const [consent, setConsent] = (0, import_react5.useState)(false);
+  const [errors, setErrors] = (0, import_react5.useState)({});
+  const [formError, setFormError] = (0, import_react5.useState)(null);
+  const [submitting, setSubmitting] = (0, import_react5.useState)(false);
+  const [ack, setAck] = (0, import_react5.useState)(null);
+  const statusRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
     if (ack) statusRef.current?.focus();
   }, [ack]);
   async function handleSubmit(event) {
@@ -668,21 +873,21 @@ function DataRequestForm({
       dateStyle: "long",
       timeStyle: "short"
     }).format(new Date(ack.slaDueAt));
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         ref: statusRef,
         tabIndex: -1,
         role: "status",
         "data-slot": "data-request-form-success",
-        className: (0, import_utils5.cn)("rounded-lg border border-border p-6 text-sm", className),
+        className: (0, import_utils7.cn)("rounded-lg border border-border p-6 text-sm", className),
         children: t.success(deadline)
       }
     );
   }
   const errorId = (field) => errors[field] ? `${id}-${field}-error` : void 0;
-  const fieldError = (field) => errors[field] ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { id: `${id}-${field}-error`, className: "text-xs text-destructive", children: errors[field] }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  const fieldError = (field) => errors[field] ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { id: `${id}-${field}-error`, className: "text-xs text-destructive", children: errors[field] }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "form",
     {
       noValidate: true,
@@ -690,11 +895,11 @@ function DataRequestForm({
       onFocusCapture: onInteract,
       onPointerDown: onInteract,
       "data-slot": "data-request-form",
-      className: (0, import_utils5.cn)("space-y-4", className),
+      className: (0, import_utils7.cn)("space-y-4", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `${id}-type`, className: "text-sm font-medium", children: t.requestTypeLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { htmlFor: `${id}-type`, className: "text-sm font-medium", children: t.requestTypeLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             "select",
             {
               id: `${id}-type`,
@@ -702,18 +907,18 @@ function DataRequestForm({
               onChange: (e) => setRequestType(e.target.value),
               "aria-invalid": errors.requestType ? true : void 0,
               "aria-describedby": errorId("requestType"),
-              className: (0, import_utils5.cn)(FIELD_CLASS, errors.requestType ? "border-destructive" : "border-border"),
+              className: (0, import_utils7.cn)(FIELD_CLASS, errors.requestType ? "border-destructive" : "border-border"),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: t.requestTypePlaceholder }),
-                requestTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: type, children: t.requestTypes[type] }, type))
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "", children: t.requestTypePlaceholder }),
+                requestTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: type, children: t.requestTypes[type] }, type))
               ]
             }
           ),
           fieldError("requestType")
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `${id}-name`, className: "text-sm font-medium", children: t.nameLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { htmlFor: `${id}-name`, className: "text-sm font-medium", children: t.nameLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "input",
             {
               id: `${id}-name`,
@@ -724,14 +929,14 @@ function DataRequestForm({
               onChange: (e) => setName(e.target.value),
               "aria-invalid": errors.name ? true : void 0,
               "aria-describedby": errorId("name"),
-              className: (0, import_utils5.cn)(FIELD_CLASS, errors.name ? "border-destructive" : "border-border")
+              className: (0, import_utils7.cn)(FIELD_CLASS, errors.name ? "border-destructive" : "border-border")
             }
           ),
           fieldError("name")
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `${id}-email`, className: "text-sm font-medium", children: t.emailLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { htmlFor: `${id}-email`, className: "text-sm font-medium", children: t.emailLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "input",
             {
               id: `${id}-email`,
@@ -742,14 +947,14 @@ function DataRequestForm({
               onChange: (e) => setEmail(e.target.value),
               "aria-invalid": errors.email ? true : void 0,
               "aria-describedby": errorId("email"),
-              className: (0, import_utils5.cn)(FIELD_CLASS, errors.email ? "border-destructive" : "border-border")
+              className: (0, import_utils7.cn)(FIELD_CLASS, errors.email ? "border-destructive" : "border-border")
             }
           ),
           fieldError("email")
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `${id}-details`, className: "text-sm font-medium", children: t.detailsLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { htmlFor: `${id}-details`, className: "text-sm font-medium", children: t.detailsLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "textarea",
             {
               id: `${id}-details`,
@@ -758,13 +963,13 @@ function DataRequestForm({
               value: details,
               onChange: (e) => setDetails(e.target.value),
               placeholder: t.detailsPlaceholder,
-              className: (0, import_utils5.cn)(FIELD_CLASS, "border-border")
+              className: (0, import_utils7.cn)(FIELD_CLASS, "border-border")
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "input",
               {
                 id: `${id}-consent`,
@@ -776,17 +981,17 @@ function DataRequestForm({
                 className: "mt-1"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `${id}-consent`, className: "text-sm text-foreground/80", children: t.consent })
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { htmlFor: `${id}-consent`, className: "text-sm text-foreground/80", children: t.consent })
           ] }),
           fieldError("consent")
         ] }),
-        formError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { role: "alert", className: "text-sm text-destructive", children: formError }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        formError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { role: "alert", className: "text-sm text-destructive", children: formError }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "button",
           {
             type: "submit",
             disabled: submitting,
-            className: "rounded-lg bg-primary px-6 py-2 text-sm font-semibold text-primary-foreground disabled:opacity-60",
+            className: "cursor-pointer rounded-lg bg-primary px-6 py-2 text-sm font-semibold text-primary-foreground disabled:cursor-not-allowed disabled:opacity-60",
             children: submitting ? t.submitting : t.submit
           }
         )
@@ -802,7 +1007,9 @@ function DataRequestForm({
   DATA_REQUEST_FIELD_LIMITS,
   DATA_REQUEST_TYPES,
   DEFAULT_DATA_REQUEST_FORM_LABELS,
+  DEFAULT_PRODUCT_CAROUSEL_LABELS,
   DataRequestForm,
+  ProductCarousel,
   ShareButtons,
   useCollection
 });